<template>
	<view class="container">
		<view class="timeDiv"  @click="selectDate()">
			<view class="timeBg">
				<image :src="urlDomain+'crmebimage/presets/dateLogo.png'"></image>
				<view class="str">{{dateStr}}</view>
			</view>
		</view>
		<view class="countDiv">
			<view class="num">{{amount}}</view>
			<view class="title">收益金额（元）</view>
		</view>
		<view class="list_title">
			收益明细
		</view>
		<scroll-view scroll-y="true" @scrolltolower="scroll()">
			<view class="listDiv" v-for="(item,index) in list" :key="item.id">
				<view></view>
			</view>
			<!-- 底部提示 -->
			<view class='loadingicon acea-row row-center-wrapper'>
				<text class='loading iconfont icon-jiazai' :hidden='!loading'></text>
			</view>
			<view v-if="!loading">
				<view class='pictrue' style="margin: 0 auto;text-align: center;">
					<!-- <image src='/static/images/no-shop.png'></image> -->
					<text>{{loadTitle}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getMyBalanceList
	} from '@/api/user.js';
	export default {
		data() {
			return {
				dateStr: '',
				where: {
					page: 1,
					limit: 20,
					type: '',
					date: ''
				},
				amount: 0.00,
				list: [],
				urlDomain: this.$Cache.get("imgHost"),
				loadTitle: '',
				loading: true,
				loadend: false,
			}
		},
		onLoad(option) {
			let title = option.title;
			//设置标题
			uni.setNavigationBarTitle({
				title: option.title
			})
			//是否初始化日期选择
			this.initDate(title);
		},
		onShow() {
			let that = this;
			uni.$on('selectDate',function(data){
				that.dateStr = data;
				that.getMyBalanceListApi(true);
			});
		},
		methods: {
			initDate(title) {
				let that = this;
				
				const dateObj = new Date();
				const year = dateObj.getFullYear(); // 获取当前年份
				const month = ("0" + (dateObj.getMonth() + 1)).slice(-2); // 获取当前月份，其中需要将月份加1，因为月份是从0开始计数的
				const formattedDate = `${year}-${month}`;
				
				//是否初始化时间
				if(title.includes('本月')){
					if(that.dateStr==''){
						that.dateStr = formattedDate;
					}
					that.$set(that.where, 'date', that.dateStr);
				}
				
				//设置类型
				if(title!=''&&title!=null){
					if(title.includes('公排')){
						that.$set(that.where, 'type', 'public');
					}else if(title.includes('服务中心')){
						that.$set(that.where, 'type', 'service');
					}else if(title.includes('推广')){
						that.$set(that.where, 'type', 'promotion');
					}else if(title.includes('销售')){
						that.$set(that.where, 'type', 'sale');
					}else if(title.includes('大区')){
						that.$set(that.where, 'type', 'region');
					}
				}
				
				that.getMyBalanceListApi(true);
			},
			getMyBalanceListApi(isPage) {
				let that = this;
				
				//是否重置列表
				if (isPage === true){
					that.$set(that, 'list', []);
					that.loadend = false;
					that.loading = true;
					that.loadTitle = '';
				}
				
				if (that.loadend) return;
				if (!that.loading) return;
				
				getMyBalanceList(that.where).then(res => {
					that.amount = res.data.totalAmount=="0"?"0.00":res.data.totalAmount;
					that.list = res.data.list;
					let loadend = res.data.list.length < that.where.limit;
					that.loadend = loadend;
					that.loadTitle = loadend ? '暂无更多记录' : '下拉加载更多';
					that.$set(that, 'list', res.data.list);
					that.$set(that.where, 'page', that.where.page + 1);
					that.loading = false;
				});
			},
			selectDate() {
				uni.navigateTo({
					url: '/pages/users/month_select/month_select?type='+this.where.type+'&date='+this.dateStr
				})
			},
			scroll() {
				if(!this.loadend){
					this.loading = true;
					this.getMyBalanceListApi();
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.container{
	background-color: #fff;
	height: 100vh;
}
.timeDiv{
	display: flex;
	justify-content: center;
	padding: 20px;
	
	.timeBg{
		display: flex;
		margin: 5px 3px;
		padding: 0px 6px 0px 3px;
		background-color: #F7F7F7;
		border-radius: 4px;
		
		image{
			width: 34px;
			height: 30px;
		}
		
		.str{
			color: #343643;
			font-size: 30rpx;
			line-height: 30px;
		}
	}
}
.countDiv{
	text-align: center;
	
	.num{
		font-size: 72rpx;
		color: #333;
		font-weight: bold;
	}
	
	.title{
		font-size: 28rpx;
		color: #6F7C85;
	}
}
.list_title{
	font-size: 32rpx;
	color: #343643;
	font-weight: bold;
	margin: 20px 16px;
}
</style>
